<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <title>演员信息管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap-icons.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/style.css">
</head>

<body class="app sidebar-mini">
<!-- Navbar-->
<header th:replace="_fregments :: header" class="app-header"><a class="app-header__logo" href="index.html">挚夕影院</a>
    <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar"
                                    aria-label="Hide Sidebar"></a>
    <!-- Navbar Right Menu-->
    <ul class="app-nav">
        <li class="app-search">
            <input class="app-search__input" type="search" placeholder="Search">
            <button class="app-search__button"><i class="bi bi-search"></i></button>
        </li>

        <!-- User Menu-->
        <li class="dropdown"><a class="app-nav__item" href="#" data-bs-toggle="dropdown" aria-label="Open Profile Menu"><i
                class="bi bi-person fs-4"></i></a>
            <ul class="dropdown-menu settings-menu dropdown-menu-right">
                <li><a class="dropdown-item" href="page-user.html"><i class="bi bi-gear me-2 fs-5"></i> 设置</a></li>
                <li><a class="dropdown-item" href="page-login.html"><i class="bi bi-box-arrow-right me-2 fs-5"></i> 登出</a>
                </li>
            </ul>
        </li>
    </ul>
</header>
<!-- Sidebar menu-->
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside th:replace="_fregments :: menu(5, 1)" class="app-sidebar">
    <div class="app-sidebar__user"><img class="app-sidebar__user-avatar" src="../../static/images/me.jpg"
                                        alt="User Image">
        <div>
            <p class="app-sidebar__user-name">Dylan</p>
            <p class="app-sidebar__user-designation">Backend Developer</p>
        </div>
    </div>
    <ul class="app-menu">
        <!-- 仪表盘 -->
        <li>
            <a class="app-menu__item" href="../index.html">
                <i class="app-menu__icon bi bi-speedometer"></i>
                <span class="app-menu__label">仪表盘</span>
            </a>
        </li>
        <!-- 影院管理 -->
        <li class="treeview">
            <a class="app-menu__item " href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-house"></i>
                <span class="app-menu__label">影院管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item " href="../cinema/cinema_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../cinema/cinema_area.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院区域管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item " href="../cinema/cinema_brand.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院品牌管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 电影管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-camera-reels"></i>
                <span class="app-menu__label">电影管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../movie/movie_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_comment.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影评论管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_age.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影年代管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_area.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影区域管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_type.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影类别管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_runtime.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影播放时段管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 影厅管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-bank"></i>
                <span class="app-menu__label">影厅管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../hall/hall_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影厅信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../hall/hall_type.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影厅类别管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 场次管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-bell"></i>
                <span class="app-menu__label">场次管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../session/session_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        场次信息管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 演员管理 -->
        <li class="treeview is-expanded">
            <a class="app-menu__item active" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-people"></i>
                <span class="app-menu__label">演员管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item active" href="../actor/actor_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        演员信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../actor/actor_role.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        演员角色管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 用户管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-person"></i>
                <span class="app-menu__label">用户管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../user/user_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        用户信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../user/user_order.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        订单信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../user/user_role.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        用户角色管理
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</aside>
<main class="app-content">

    <!-- Modal 开始-->
    <div class="modal fade" id="actorModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">添加演员</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="modalInputActorName" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>演员姓名</label>
                        <div class="col-sm-9">
                            <input class="form-control" type="text" id="modalInputActorName">
                            <input class="form-control" type="hidden" id="modalInputActorId">
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label for="modalSelectActorGender" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>演员性别</label>
                        <div class="col-sm-9">
                            <select class="form-select" aria-label="Default select example" id="modalSelectActorGender">
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label for="modalInputActorPicture" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>演员图片</label>
                        <div class="col-sm-9">
                            <input class="form-control" type="file" id="modalInputActorPicture">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" id="saveBtn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div><!-- Modal 结束-->


    <div class="app-title">
        <div>
            <h1><i class="bi bi-speedometer"></i> 演员信息管理</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="bi bi-house-door fs-6"></i></li>
            <li class="breadcrumb-item"><a th:href="@{/actor/info}">演员管理</a></li>
            <li class="breadcrumb-item">演员信息管理</li>
        </ul>
    </div>
    <!-- 查询条件 -->
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-3">
            <input class="form-control" id="inputActorName" type="text" placeholder="请输入演员姓名">
        </div>
        <div class="col-md-3">
            <button type="button" id="searchBtn" class="btn btn-success">搜索</button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#actorModal"
                    data-id="0">添加演员
            </button>
            <button type="button" id="deleteAllBtn" class="btn btn-danger">批量删除</button>
        </div>
    </div>

    <div id="table-container">
        <div th:fragment="actorList">
            <div class="row">
                <div>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th scope="col">
                                <input class="form-check-input" type="checkbox" value="" id="checkAll">
                            </th>
                            <th scope="col">
                                姓名
                            </th>
                            <th scope="col">
                                性别
                            </th>
                            <th scope="col">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="actor : ${actorPage.records}">
                            <th scope="row">
                                <input class="form-check-input deleteCheck" type="checkbox" th:value="${actor.id}">
                            </th>
                            <td th:text="${actor.name}">易烊千玺</td>
                            <td th:text="${actor.gender == 0 ? '男' : '女'}">男</td>
                            <td>
                                <button type="button" class="btn btn-primary updateBtn" data-bs-toggle="modal"
                                        data-bs-target="#actorModal" th:data-id="${actor.id}">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                                <button type="button" class="btn btn-danger deleteBtn" th:data-id="${actor.id}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <!--分页条-->
            <div class="row">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${!actorPage.hasPrevious()} ? 'disabled'">
                            <a th:data-pageNo="${actorPage.current - 1}" class="page-link">上一页</a>
                        </li>
                        <!-- 最多显示五个页码按钮-->
                        <!-- 小于等于5页，全部显示-->
                        <th:block th:if="${actorPage.getPages() <= 5}">
                            <!--考虑一页都没有的情况-->
                            <th:block th:if="${actorPage.getPages() > 0}">
                                <li th:each="i : ${#numbers.sequence(1,actorPage.getPages())}" class="page-item">
                                    <a class="page-link" th:classappend="${i == actorPage.current} ? 'active'"
                                       th:data-pageNo="${i}" th:text="${i}"></a>
                                </li>
                            </th:block>
                        </th:block>
                        <!-- 大于5页，分情况-->
                        <th:block th:if="${actorPage.getPages() > 5}">
                            <!-- 后面有两页及以上-->
                            <th:block th:if="${actorPage.getPages() >= actorPage.current + 2}">
                                <!-- no < 3 不居中-->
                                <th:block th:if="${actorPage.current < 3}">
                                    <li th:each="i : ${#numbers.sequence(1, 5)}" class="page-item">
                                        <a class="page-link" th:classappend="${i == actorPage.current} ? 'active'"
                                           th:data-pageNo="${i}" th:text="${i}"></a>
                                    </li>
                                </th:block>
                                <!-- 大于2可居中-->
                                <th:block th:if="${actorPage.current >= 3}">
                                    <li th:each="i : ${#numbers.sequence(actorPage.current - 2, actorPage.current + 2)}"
                                        class="page-item" th:classappend="${actorPage.current == i} ? 'active'">
                                        <a class="page-link"
                                           th:classappend="${i == actorPage.current} ? 'active'"
                                           th:data-pageNo="${i}" th:text="${i}"></a>
                                    </li>
                                </th:block>
                            </th:block>
                            <!-- 当前页码后面不足两页-->
                            <th:block th:if="${actorPage.getPages() < actorPage.current + 2}">
                                <li th:each="i : ${#numbers.sequence(actorPage.getPages() - 4, actorPage.getPages())}"
                                    class="page-item" th:classappend="${actorPage.current == i} ? 'active'">
                                    <a class="page-link"
                                       th:classappend="${i == actorPage.current} ? 'active'"
                                       th:data-pageNo="${i}" th:text="${i}"></a>
                                </li>
                            </th:block>
                        </th:block>
                        <li class="page-item" th:classappend="${!actorPage.hasNext()} ? 'disabled'">
                            <a th:data-pageNo="${actorPage.current + 1}" class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

</main>
<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../../static/js/jquery-3.7.0.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/main.js"></script>
<!--/*/</th:block>/*/-->

<script type="text/javascript">
    function clearModalInput() {
        $("#modalInputActorId").val('')
        $("#modalInputActorName").val('')
        $("#modalSelectActorGender").val(0)
        $("#modalInputActorPicture").val('')
    }

    function page(pageNo) {
        //收集参数
        var name = $.trim($("#inputActorName").val())
        console.log(name)
        //加载数据
        $("#table-container").load(/*[[@{/actor/info/search}]]*/"/actor/info/search", {
            pageNo: pageNo,
            pageSize: 10,
            name: name
        });
    }

    $(function () {
        //全选
        $("#table-container").on('click', '#checkAll', function () {
            $(".deleteCheck").prop("checked", this.checked);
        });
        $("#table-container").on('click', '.deleteCheck', function () {
            $("#checkAll").prop("checked",
                $(".deleteCheck").length == $(".deleteCheck:checked").length);
        });
        //分页条按钮点击事件
        $("#table-container").on('click', '.page-link', function () {
            var pageNo = $(this).data('pageno')
            page(pageNo)
        })
        const actorModal = document.getElementById('actorModal')
        actorModal.addEventListener('show.bs.modal', event => {
            // Button that triggered the modal
            const button = event.relatedTarget
            // Extract info from data-bs-* attributes
            const id = button.getAttribute('data-id')
            const modalTitle = actorModal.querySelector('.modal-title')
            if (id != '0') { //修改
                modalTitle.textContent = '修改演员'
                $.ajax({
                    url: '[[@{/actor/info/}]]' + id,
                    type: 'get',
                    success: function (response) {
                        if (response.status == 'success') {
                            var actor = response.data;
                            $("#modalInputActorId").val(id)
                            $("#modalInputActorName").val(actor.name)
                            $("#modalSelectActorGender").val(actor.gender)
                            $("#modalInputActorPicture").val('')
                        }
                    }
                })
            } else {
                modalTitle.textContent = '添加演员'
                //清空输入
                clearModalInput()
            }
        })
        //保存
        $("#saveBtn").click(function (){
            var id = $("#modalInputActorId").val()
            var name = $.trim($("#modalInputActorName").val())
            var gender = $("#modalSelectActorGender").val()
            var pictures = $("#modalInputActorPicture")[0].files
            var formData = new FormData()
            //文件
            for (let i = 0; i < pictures.length; i++) {
                formData.append("pictures", pictures.item(i)) // 向相同键添加可叠加文件
            }
            formData.append('id', id)
            formData.append('name', name)
            formData.append('gender', gender)

            $.ajax({
                url: '[[@{/actor/info}]]',
                type: id ? 'put' : 'post',
                data: formData,
                processData: false, // processData和contentType必须是false
                contentType: false,
                async: true
            }).then(res => {
                if (res.status == 'success') {
                    toastr.success(res.data, 'success');
                    page(1)
                    $("#actorModal").modal('hide')
                } else {
                    console.log(res)
                    toastr.warning(res.data.errorMessage, 'warning');
                }
            })

        })

        //删除
        $("#table-container").on('click', '.deleteBtn', function (){
            var id = $(this).data('id')
            $.ajax({
                url: '[[@{/actor/info/}]]' + id,
                type: 'delete',
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                        page(1)
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })
        //批量删除
        $("#deleteAllBtn").click(function (){
            var actorIds = $(".deleteCheck:checked")
            if(actorIds.length == 0){
                swal('请勾选要删除的演员')
                return
            }
            var ids = ''
            $.each(actorIds, function () {
                ids += 'id=' + this.value + "&"
            })
            ids = ids.substring(0, ids.length - 1)
            swal("确认删除选中吗?", {
                buttons: ["取消", "确认"],
            }).then((value) => {
                // 点击取消 value=null
                // 点击确认 value=true
                if (value) {
                    $.ajax({
                        url: '[[@{/actor/info}]]',
                        type: 'delete',
                        data: ids,
                        success: function (response) {
                            if (response.status == 'success') {
                                //加载表格数据
                                page(1)
                                swal(response.data);
                            } else {
                                swal(response.data.errorMessage)
                            }
                        },
                        error: function (response) {
                            swal(response.responseText)
                        }
                    })
                }
            });
        })

        //搜索
        $("#searchBtn").click(function (){
            page(1)
        })

    });

</script>
</body>

</html>